<template lang="pug">
  .editTable
    s-table(
      :rowKey="rowKey"
      :column="column"
      :dataPops="list"
      :size="size"
    )
      template(v-for="(item, index) in editItems" :slot="item.prop" slot-scope="text, scope, index")
        span(:key="item.prop")
          span(v-if="!scope.editFlag")
            template(v-if="item.type === 'select'") {{optFilter(text, item.formProps)}}
            template(v-else-if="item.type && (item.type.includes('date') || item.type.includes('time')) && text")
              template(v-if="Array.isArray(text)")
                | {{text[0] | dateFilter(!item.type.includes('time') ? 'YYYY/MM/DD' : 'YYYY/MM/DD HH:mm:ss') }} ~ {{text[1] | dateFilter(!item.type.includes('time') ? 'YYYY/MM/DD' : 'YYYY/MM/DD HH:mm:ss') }}
              template(v-else) {{text | dateFilter(!item.type.includes('time') ? 'YYYY/MM/DD' : 'YYYY/MM/DD HH:mm:ss')}}
            template(v-else) {{text}}
          template(v-else)
            el-input-number(v-if="item.type === 'number'" v-bind="item.formProps || {}" style="width: 100%" controls-position="right" size="small" v-model="scope[item.prop]" @change="val => formChange(val, item.prop, index)")
            el-date-picker(v-else-if="item.type === 'date'" v-bind="item.formProps || {}" size="small"  v-model="scope[item.prop]" @change="val => formChange(val, item.prop, index)")
            i-select(v-else-if="item.type === 'select'" size="small" v-bind="item.formProps" v-model="scope[item.prop]" @change="val => formChange(val, item.prop, index)")
            el-input(v-else v-model="scope[item.prop]" v-bind="item.formProps || {}" size="small" @change="val => formChange(val, item.prop, index)")
      template(slot="action" slot-scope="text, scope, index")
        el-link.f13(v-if="!scope.editFlag" :underline="false" @click="toggleLine(index, 'edit')" type="primary") 编辑
        el-link.f13(v-if="scope.editFlag" :underline="false" @click="toggleLine(index, 'save')" type="primary") 保存
        el-link.f13(v-if="canDelAll || index !== list.length - 1" :underline="false" @click="deleteLine(index)" type="danger") 删除
    el-button.mt10(:size="size" @click="addLine" type="success") 添加
</template>
<script>
export default {
  props: {
    rowKey: {
      type: String,
      default: 'id'
    },
    column: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Array,
      default: () => ([])
    },
    canDelAll: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'large'
    }
  },
  data () {
    return {
      list: []
    }
  },
  computed: {
    editItems () {
      return this.column.filter(x => x.canEdit)
    }
  },
  watch: {
    value: {
      handler (val) {
        console.log(val)
        this.list = val
      },
      immediate: true
    }
  },
  methods: {
    formChange (val, key, index) {
      const { list } = this
      list[index][key] = val
      this.list = [...list]
      this.$emit('formChange', { list, val, key, index })
    },
    toggleLine (index, type) {
      const { list, $message, editItems } = this
      if (type === 'save') {
        let flag = false
        const obj = list[index]
        flag = editItems.find(x => {
          if (x.required && !obj[x.prop]) {
            $message.error(`${x.label}不能为空`)
            return x
          } else if (x.reg && obj[x.prop] && !x.reg.test(obj[x.prop])) {
            $message.error(`${x.label}格式不正确`)
            return x
          }
        })
        if (flag) {
          return
        }
      }
      list[index].editFlag = type !== 'save'
      this.list = [...list]
      if (type === 'save') {
        this.$emit('input', list)
        this.$emit('save', list[index])
      }
    },
    // 删除行
    deleteLine (index) {
      const { list } = this
      list.splice(index, 1)
      this.list = [...list]
    },
    // 新增行
    addLine () {
      const { list, column } = this
      const obj = {}
      column.forEach(x => {
        obj[x.prop] = ''
      })
      list.push({
        id: new Date().getTime().toString(),
        addFlag: true,
        editFlag: true,
        ...obj
      })
    },
    optFilter (val, obj) {
      if (obj.dictKey) {
        return this.dictFilter(val, obj.dictKey, obj.props?.value, obj.props?.label)
      }
      const a = (obj.options || []).find(x => x[obj.props?.value || 'id'] === val)
      return a ? a[obj.props?.label || 'name'] : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.editTable {
  ::v-deep {
    .tableWrapper{
      padding: 0
    }
  }
}
</style>
